import React, { Component, PropTypes } from "react";
import { Row, Col, Icon, Badge } from 'antd'
import { messages, queryCurrencyPrecision } from "share/common"
import { Condition } from "components/index";
import Table from "components/table";
import SlideFrame from "components/slide-frame";
import refundContent from "../../template/refund-content";
import moment from "moment";
import openSlideFrame from "share/openSlideFrame";
const { If, Else } = Condition;

class SlideLoanRefund extends Component {

  typeEnum = {
    "0": messages('finance-1.key8')/*现金还款*/,
    "1": messages('finance-1.key9')/*转账还款*/,
    "2": messages('finance-1.key11')/*报销单还款*/,
    "3": messages('finance-1.key10')/*信用还款*/
  };

  statusEnum = new Map([
    ['1001', { text: messages('finance-1.key13')/*还款中*/, status: 'processing' }],
    ['1002', { text: messages('finance-1.key14')/*已还款*/, status: 'success' }],
    ['1003', { text: messages('finance-1.key15')/*被驳回*/, status: 'error' }]
  ]);

  columns = [
    {
      title: messages('common.date')/*日期*/, dataIndex: 'createDate', width: 120,
      render: value => moment(value).format('YYYY-MM-DD')
    },
    { title: messages('finance-1.key5')/*还款单号*/, dataIndex: 'businessCode' },
    { title: messages('finance-1.key6')/*借款行号*/, dataIndex: 'loanLineNumber' },
    {
      title: messages('finance-1.key7')/*还款方式*/, dataIndex: 'type',
      render: value => this.typeEnum[value]
    },
    { title: messages('common.currency')/*币种*/, dataIndex: 'curreny', width: 48 },
    {
      title: messages('finance-1.key12')/*还款金额*/, dataIndex: 'actRepayAmount',
      render: (value, record) => this.filterMoney(value, queryCurrencyPrecision(record.curreny))
    },
    {
      title: messages('common.column.status')/*状态*/, dataIndex: 'status',
      render: value => {
        let obj = this.statusEnum.get(value);
        return <Badge status={obj.status} text={obj.text}/>
      }
    }
  ];

  handleRepaymentClick = record => {
    const { pathname } = this.context;
    if (record.type === '2' || record.type === '3') {
      openSlideFrame.openExpenseReport({
        expenseReportOID: record.expenseReportOid,
        entry: 'view'
      }, {}, this);
    } else {
      SlideFrame.open({
        content: refundContent,
        params: {
          refundParams: record.repaymentOid,
          pathname: pathname
        },
        title: messages('finance-1.key60')/*还款详情*/,
      }, this);
    }
  };

  render() {
    const { info } = this.context;
    let precision = queryCurrencyPrecision(info.currencyCode);
    return (
      <div className='slide-expense-report-detail-expense'>
        <If value={info.hasWriteOffAmount === info.currencyAmount}>
          <div>
            <Icon type='check-circle-o' style={{color: '#00A854',fontSize:'15px'}}/>
            {messages('finance-1.key36')/*已全额还款*/}
          </div>
        </If>
        <Else>
          <Row gutter={24}>
            <Col span={8}>
              {messages('finance-1.key14')/*已还款*/}：
              {this.filterMoney(info.hasWriteOffAmount, precision)}
            </Col>
            <Col span={8}>
              {messages('finance-1.key13')/*还款中*/}
              {this.filterMoney(info.lockedWriteOffAmount, precision)}
            </Col>
            <Col span={8}>
              {messages('finance-1.key37')/*待还款*/}：
              {this.filterMoney(info.stayWriteOffAmount, precision)}
            </Col>
          </Row>
        </Else>
        <div className='slide-expense-report-detail-expense-list-container'>
          <Table
            columns={this.columns}
            rowKey="id"
            showUtils
            onRow={record => ({
              onClick: () => this.handleRepaymentClick(record)
            })}
            dataSource={info.repaymentList}
            pagination={false}
            utilsConfig={{ style: { right: 0 } }}
            scroll={{x:  true}}
            className='slide-expense-report-detail-expense-list-table'
          />
        </div>
      </div>
    )
  }

  static contextTypes = {
    info: PropTypes.object,
    pathname: PropTypes.string
  }

}

export default SlideLoanRefund
